<template>
    <div class="play">
        <div class="head">
            <div class="h-icon"
                 @click="hidePlay"><i class="icon">&#xe8e2;</i></div>
            <div class="h-icon" @click="showToast"><i class="icon">&#xe93b;</i></div>
        </div>
        <div class="name">{{audio.name}}</div>
        <div class="operation">
            <div class="love" @click="showToast"><i class="icon">&#xe615;</i></div>
            <div class="msg" @click="showToast"><i class="icon">&#xe603;</i></div>
            <div class="share" @click="showToast"><i class="icon">&#xe64c;</i></div>
        </div>
        <div class="content">
            <div class="lyrics">
                <div class="m-name">{{audio.name}}</div>
                <div class="s-name"
                     v-if="audio.ar">{{audio.ar[0].name}}</div>
                <div class="s-name"
                     v-else>{{audio.artists[0].name}}</div>
                <div class="lyric">
                    <div class="roll-lyric"
                         v-html="lyrics" ref="lyric"></div>
                </div>
            </div>
            <div class="time">
                <div class="n-time">{{nowTime}}</div>
                <div class="t-time">{{totalTime}}</div>
            </div>
            <div class="control">
                <div>
                    <div class="loop" @click="showToast"><i class="icon">&#xe819;</i></div>
                    <div class="pre"
                         @click="_pre()"><i class="icon">&#xe61e;</i></div>
                    <div class="pause">
                        <i class="icon"
                           v-if="playing"
                           @click="_pause()">&#xe644;</i>
                        <i class="icon pause-icon"
                           v-else
                           @click="_play()">&#xe630;</i>
                    </div>
                    <div class="next"
                         @click="_next()"><i class="icon">&#xe604;</i></div>
                    <div class="list"
                         @click="showList()"><i class="icon">&#xe60f;</i></div>
                </div>
            </div>
            <div class="process" @click="showToast">
                <div class="line"></div>
                <div class="pro" :style="{transform: `translateX(${translateX}) rotate(${deg*1 + 56.5*((now / size).toFixed(3))}deg)`}"></div>
            </div>
        </div>
        <div class="background">
            <img :src="audio.al.picUrl"
                 width="100%"
                 height="100%"
                 alt=""
                 v-if="audio.al">
            <img :src="audio.album.picUrl"
                 width="100%"
                 height="100%"
                 alt=""
                 v-else>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'

import api from '../api'
import * as _ from '../util/tool'

export default {
    data() {
        return {
            now: '',
            lyricArr: [],
            pDom: [],
            deg: '',
            translateX: ''
        }
    },
    computed: {
        ...mapGetters([
            'listenLists',
            'audio',
            'showListenList',
            'playing',
            'lyric',
            'size'
        ]),
        lyrics() {
            let lyrics = ''
            this.lyricArr = []
            if (this.lyric) {
                let arr = this.lyric.split('\n')
                for (let item of arr) {
                    if (item) {
                        let arr2 = item.split(']')
                        // console.log(arr2[0])
                        // console.log(arr2[0].substring(1,3)*60)
                        // console.log(arr2[0].substring(4))
                        this.lyricArr.push(arr2[0].substring(1,3)*60+arr2[0].substring(4)*1)
                        // console.log(this.lyricArr)
                        if (arr2) {
                            lyrics += `<p class='lyrichook' style='margin: 10px 0'>${arr2[1]}</p>`
                        }
                    }
                }
            } else {
                lyrics = '暂无歌词~'
            }
            return lyrics
        },
        totalTime() {
            let m, s
            m = Math.floor(this.size / 60)
            m = m.toString().length == 1 ? ('0' + m) : m
            s = Math.floor(this.size - 60 * m)
            s = s.toString().length == 1 ? ('0' + s) : s
            return m + ':' + s
        },
        nowTime() {
            let m, s
            m = Math.floor(this.now / 60)
            m = m.toString().length == 1 ? ('0' + m) : m
            s = Math.floor(this.now - 60 * m)
            s = s.toString().length == 1 ? ('0' + s) : s
            return m + ':' + s
        },
    },
    created() {
        this.$store.dispatch('getMusicInfo', 471385043)
        this.$store.dispatch('getMusicTime', 312.241633)
        this.resize()
    },
    mounted() {
        let timer,
            audioDOM = document.querySelector('audio')
        audioDOM.addEventListener('play', () => {
            this.pDOM = [...document.querySelectorAll('.lyrichook')]
            timer = setInterval(() => {
                this.now = audioDOM.currentTime
                this.lyricArr.forEach((item, index) => {
                    if (parseInt(item) == parseInt(this.now)) {
                        this.pDOM.forEach((p) => {
                            p.style.color = 'rgba(255,255,255,.8)'
                        });
                        this.pDOM[index].style.color = '#f12c61'
                        this.$refs.lyric.style.transform = `translateY(-${(index-2)*25}px)`
                        
                    } 
                });
            }, 1000)
        })
        audioDOM.addEventListener('pause', () => {
            clearInterval(timer)
        })
        window.addEventListener('resize', () => {
            this.resize()
        })
    },
    methods: {
        _play() {
            this.$store.dispatch('setPlaying', true)
        },
        _pause() {
            this.$store.dispatch('setPlaying', false)
        },
        _pre() {
            this.$store.dispatch('setPlaying', false)
            for (let i = 0; i < this.listenLists.length; i++) {
                if (this.listenLists[i].name === this.audio.name) {
                    this.$store.dispatch('setPreAudio', i)
                    break
                }
            }
            if (this.audio.mp3Url) {
                this.$store.dispatch('setAudioUrl', this.audio.mp3Url)
            } else {
                api.MusicUrl(this.audio.id)
                    .then(res => {
                        this.$store.dispatch('setAudioUrl', res.data[0].url)
                    })
                    .catch(res => {
                        this.$store.dispatch('setAudioUrl', res.data[0].url)
                    })
            }
            let audioDOM = document.querySelector('audio')
            audioDOM.addEventListener('loadedmetadata', () => {
                this.$store.dispatch('setPlaying', true)
            })
        },
        _next() {
            this.$store.dispatch('setPlaying', false)
            for (let i = 0; i < this.listenLists.length; i++) {
                if (this.listenLists[i].name === this.audio.name) {
                    this.$store.dispatch('setNextAudio', i)
                    break
                }
            }
            if (this.audio.mp3Url) {
                this.$store.dispatch('setAudioUrl', this.audio.mp3Url)
            } else {
                api.MusicUrl(this.audio.id)
                    .then(res => {
                        this.$store.dispatch('setAudioUrl', res.data[0].url)
                    })
                    .catch(res => {
                        this.$store.dispatch('setAudioUrl', res.data[0].url)
                    })
            }
            let audioDOM = document.querySelector('audio')
            audioDOM.addEventListener('loadedmetadata', () => {
                this.$store.dispatch('setPlaying', true)
            })
        },
        showList() {
            this.$store.dispatch('setShowListenList', true)
        },
        hidePlay() {
            this.$store.dispatch('setShowPlay', false)
        },
        showToast() {
            _.toast('开发中，敬请期待...')
        },
        resize() {
            let cwidth = document.body.clientWidth
            if(cwidth === 460) {
                this.translateX = '-3.73333rem'
                this.deg = '-523'
            } else {
                this.translateX = '-2.98667rem'
                this.deg = '-527'
            }
        },
    },
    watch: {
        size() {
            this.$refs.lyric.style.transform = 'translateY(0px)'
        },
        lyrics() {
            this.$nextTick(() => {
                this.pDOM = [...document.querySelectorAll('.lyrichook')]
            })
        },
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/function.scss';
.play {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 20;
    width: 100%;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    .head {
        height: px2rem(100px);
        line-height: px2rem(100px);
        text-align: center;
        display: flex;
        justify-content: space-between;
        .h-icon {
            width: px2rem(100px);
            cursor: pointer;
            .icon {
                font-size: px2rem(46px);
            }
        }
    }
    .name {
        font-size: px2rem(60px); // font-weight: bold;
        color: #fff;
        position: absolute;
        top: px2rem(300px);
        width: 100%;
        text-align: center;
    }
    .operation {
        position: absolute;
        right: px2rem(100px);
        top: px2rem(430px);
        z-index: 50;
        >div {
            width: px2rem(80px);
            height: px2rem(80px);
            line-height: px2rem(80px);
            text-align: center;
            border-radius: 50%;
            background: #f12c61;
            position: relative;
            cursor: pointer;
            .icon {
                font-size: px2rem(46px);
            }
        }
        .love {
            right: px2rem(150px);
            top: px2rem(60px);
            line-height: px2rem(90px);
        }
        .msg {
            right: px2rem(50px);
            background: #45c4a6;
        }
        .share {
            right: px2rem(-50px);
            top: px2rem(-58px);
            background: #7a3dfd;
        }
    }
    .content {
        height: 100%;
        overflow: hidden;
        position: relative;
        .lyrics {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: px2rem(850px);
            background: rgba(40, 34, 78, .9);

            &::after {
                content: '';
                position: absolute;
                top: px2rem(-147.6px);
                width: 0;
                height: 0; // border-left: px2rem(750px) solid rgba(40, 34, 78, .9);
                border-bottom: px2rem(150px) solid rgba(40, 34, 78, .9);
                border-right: px2rem(750px) solid transparent;
            }
            .m-name {
                font-size: px2rem(38px);
                text-align: center;
                color: #fff;
                margin: px2rem(20px);
            }
            .s-name {
                color: rgba(255, 255, 255, .8);
                font-size: px2rem(32px);
                text-align: center;
            }
            .lyric {
                width: px2rem(700px);
                height: px2rem(250px);
                margin: px2rem(40px) auto;
                color: rgba(255, 255, 255, .8);
                text-align: center;
                font-size: px2rem(30px);
                overflow: auto; // transform: translateY(20px);
                // p {
                //     margin: px2rem(20px) 0;
                //     transform: translateY(-20px);
                // }
                .roll-lyric {
                    transition: transform .5s;
                    transform: translateY(0px);
                }
            }
        }
        .time {
            width: 100%;
            height: px2rem(50px);
            line-height: px2rem(50px);
            text-align: center;
            position: absolute;
            bottom: px2rem(320px);
            color: #fff;
            display: flex;
            justify-content: space-between;
            font-size: px2rem(28px);
            >div {
                width: px2rem(100px);
            }
        }
        .control {
            position: absolute;
            bottom: px2rem(-860px); // width: px2rem(900px);
            width: px2rem(1200px);
            left: px2rem(-225px);
            height: px2rem(1200px);
            background: #ea2448;
            border-radius: 50%;
            border-bottom-color: transparent;
            z-index: 30;
            >div {
                width: px2rem(650px);
                display: flex;
                height: px2rem(120px);
                line-height: px2rem(120px);
                transform: translate(px2rem(280px), px2rem(80px));
                >div {
                    flex: 1;
                    z-index: 35;
                    text-align: center;
                    cursor: pointer;
                    .icon {
                        font-size: px2rem(54px);
                    }
                    &:first-child,
                    &:last-child {
                        padding-top: px2rem(8px);
                        .icon {
                            font-size: px2rem(40px);
                        }
                    }
                }
                .pause {
                    background: #fff;
                    border-radius: 50%;
                    margin: 0 px2rem(6px) 0 px2rem(10px);
                    .icon {
                        color: #4436b1;
                    }
                    .pause-icon {
                        margin-top: px2rem(12px);
                        margin-left: px2rem(6px);
                    }
                }
            }
        }
        .process {
            position: absolute;
            bottom: px2rem(270px);
            width: 100%;
            height: px2rem(100px);
            overflow: hidden;
            z-index: 40;
            .line {
                width: px2rem(1200px);
                height: px2rem(1200px);
                border-radius: 50%;
                position: absolute;
                transform: translateX(px2rem(-224px)) rotate(100deg);
                border: 1px solid rgba(255, 255, 255, .6);
                border-bottom-color: transparent;
            }
            .pro {
                width: px2rem(1200px);
                height: px2rem(1200px);
                border-radius: 50%;
                position: absolute;
                transform: translateX(-2.98667rem) rotate(-528deg); //-462
                border: 2px solid #fff;
                border-bottom-color: transparent;
            }
        }
    }
    .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        filter: blur(5px);
    }
}

@media screen and(min-width: 769px) {
    .play {
        width: 460px;
        .name {
            top: px2rem(250px);
        }
        .operation {
            top: px2rem(350px);
        }
        .content {
            width: 460px;
            overflow: hidden;
            .lyrics {
                height: 500px;
                .lyric {
                    height: px2rem(200px);
                    width: 460px;
                    font-size: px2rem(25px);
                }
            }
            .time {
                bottom: px2rem(250px);
            }
            .control {
                bottom: px2rem(-925px);
                left: px2rem(-280px);
                >div {
                    width: px2rem(550px);
                    height: px2rem(100px);
                    line-height: px2rem(100px);
                    transform: translate(px2rem(325px), px2rem(60px));
                    >div {
                        .icon {
                            font-size: px2rem(44px);
                        }
                        &:first-child,
                        &:last-child {
                            padding-top: px2rem(8px);
                            .icon {
                                font-size: px2rem(30px);
                            }
                        }
                    }
                    .pause {
                        margin: 0 px2rem(6px) 0 px2rem(10px);
                    }
                }
            }
            .process {
                bottom: px2rem(220px);
                overflow: hidden;
                height: px2rem(75px);
                .line {
                    width: px2rem(1200px);
                    height: px2rem(1200px);
                    border-radius: 50%;
                    position: absolute;
                    transform: translateX(px2rem(-280px)) rotate(100deg);
                    border: 1px solid rgba(255, 255, 255, .6);
                    border-bottom-color: transparent;
                }
                .pro {
                    width: px2rem(1200px);
                    height: px2rem(1200px);
                    border-radius: 50%;
                    position: absolute;
                    transform: translateX(px2rem(-280px)) rotate(-523deg); //-462
                    border: 2px solid #fff;
                    border-bottom-color: transparent;
                }
            }
        }
    }
}
</style>